<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG Basics</title>

<link type="text/css" href="css/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
<style type="text/css">
@import "jquery.svg.css";
@import "style.css";


/* 2.1 =Splitter
---------------------------------------------------------------------- */


.splitter {
  margin: 40px -40px;
  text-align: center;
  background: #35393c url("i/splitter.png") repeat-x 0 100%;
  border-bottom: 1px solid #1d1f21;
  padding: 6px 40px 5px;
  font-size: 12px;
}

.splitter:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

.splitter fieldset {
  margin-right: 0;
  margin-top: 0;
}

.splitter > legend {
  padding-left: 8px;
}

.splitter input {
  border-bottom: 0;
  position: static;
}

.splitter input  {
  display: inline;
  display: inline-block;
  line-height: 1;
}

.splitter input {
  padding: 5px 8px 6px;
  color: #070708;
  text-shadow: rgba(255, 255, 255, 0.1) 0 1px 0;
  text-decoration: none;
}

.splitter input:checked {
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.25) 0 1px 0;
}


/* 3.2 =Image Grid
---------------------------------------------------------------------- */
.image-grid {
  margin: -10px 0 0 -40px;
  padding-left: 5px;
  width: 100%;
}

.image-grid:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

.image-grid li {
  height: 100px;
  margin: 10px 0 0 35px;
  float: left;
  text-align: center;
  font-family: "Helvetica Neue", sans-serif;
  line-height: 17px;
  color: #686f74;
  overflow: hidden;
}

.image-grid li img,
.image-grid li strong {
  display: block;
}

.image-grid li strong {
  color: #fff;
}

</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript" src="jquery.quicksand.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.jsPlumb-1.3.9-all-min.js"></script>

<script type="text/javascript" src="redner/engine.js"></script>

<script type="text/javascript" src="editor/line.js"></script>
<script type="text/javascript" src="editor/svgs.js"></script>
<script type="text/javascript" src="editor/lamp.js"></script>
<script type="text/javascript" src="editor/switch.js"></script>
<script type="text/javascript" src="redner/editor.js"></script>
<script type="text/javascript" src="redner/dialog.js"></script>

<script type="text/javascript">
$(function() {
	$('#editorwindow').SVGEngine();
	setRednerEngine($('#editorwindow'));
	$('#editorwindow').Editor();
		
	$('#clear').click(function() {
		$('#editorwindow').SVGEngine("clear");
	});
	$('#export').click(function() {
		var xml = $('#editorwindow').SVGEngine("exportSVG");
		$('#svgexport').html(xml.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'));
	});
	
	$('#editorwindow').Editor('menu',$("#applications"));
	
	$('#editorwindow').Dialog('init',{title:'hallo',height:500});
	$('#editorwindow').Dialog('addTab',{title:'dfdf'});
	$('#editorwindow').Dialog('addTab',{title:'tab2'});
	$('#editorwindow').Dialog('open');
});

</script>
</head>
<body>

<p id="tools">

<form id="filter" class="splitter">
  <fieldset>
    <legend>Filter</legend>
    <label><input type="radio" name="type" value="all" checked="checked">Alles</label>
    <label><input type="radio" name="type" value="bg">Hintergrund</label>
    <label><input type="radio" name="type" value="ia">Interaktionselemente</label>
    <label><input type="radio" name="type" value="hw">Hardware</label>
  </fieldset>
</form>

<ul id="applications" class="image-grid">
</ul>

</p>

<div id="editorwindow"></div>


<p>	<button id="clear">Clear</button> <button id="export">Export</button></p>
<div id="svgexport"></div>
</body>
</html>
